{% extends 'base.html' %}
{% load staticfiles %}
{#页面标题#}
{% block title %}我的网站{% endblock %}
{% block nav_blog_active%}active{% endblock%}
{% block header_extends %} 
    <link rel="stylesheet" href="{% static "css/blog.css"%}">
{% endblock %}  
{#页面内容#}
{% block content %}
    <div class="container">
        <div class="row">
            <div class="col-sm-9">          
                        <div class="btitle">{% block blog_list_title %}<h4><i class="fa fa-file-text" aria-hidden="true"> 博客列表</i> </h4> {%endblock%}</div>
                    
                            {% for blog in page_of_blogs.object_list %}
                            <div class="card card-style">
                                <div class="card-body">
                                <div class="blog">
                                 <h5 class="card-title"><a href="{% url 'blog_detail' blog.pk %}">
                                    {{ blog.title }}
                                </a></h5>
                                <p class="blog-info">
                                    <i class="fa  fa-tag fa-fw" ></i> <a href="{% url 'blogs_with_type' blog.blog_type.pk %}">{{blog.blog_type}}</a>&nbsp;&nbsp;
                                    <i class="fa  fa-clock-o fa-fw"></i>{{blog.created_time|date:"Y-m-d"}} &nbsp;&nbsp;阅读({{blog.get_read_num}})
                                </p>
                                <p>{{ blog.content|striptags|truncatechars:120}}</p>
                                </div>
                            </div>
                            </div>
                                {% empty%}
                                    <p>---暂无博客，敬请期待----</p>
                                {% endfor%}
                                  

                    <div class="paginator text-center">
                            <ul class="pagination justify-content-center">
                                {#前一页#}
                                {% if page_of_blogs.has_previous %}  
                                    <li class="page-item">
                                    <a class="page-link" href="?page={{page_of_blogs.previous_page_number}}">下一页</a>
                                    </li>
                                {% else %} 
                                    <li class="page-item disabled">
                                    <a class="page-link" href="#">上一页</a>
                                    </li>
                                {% endif %}
                                {#全部页码#}
                                 {% for page_num in page_range %}
                                    {%if page_num == page_of_blogs.number%}
                                    <li class="page-item active"><a class="page-link">{{ page_num }}</a></li>
                                {% else%}
                                    {% if page_num == '...'%}
                                        <li class="page-item disabled"><a class="page-link" href="#">{{ page_num }}</a></li>
                                    {% else %}
                                        <li class="page-item"><a class="page-link" href="?page={{ page_num }}">{{ page_num }}</a></li>
                                    {% endif %}
                                {% endif %}
                                {% endfor %}
                                {#下一页#}
                                {% if page_of_blogs.has_next %}  
                                    <li class="page-item">
                                    <a class="page-link" href="?page={{page_of_blogs.next_page_number}}">下一页</a>
                                    </li>
                                {% else %} 
                                    <li class="page-item disabled">
                                    <a class="page-link" href="#">下一页</a>
                                    </li>
                                {% endif %}
                            </ul>
                            <p>
                            一共有{{page_of_blogs.paginator.count}}篇博客,
                            当前第{{page_of_blogs.number}}页,
                            共{{page_of_blogs.paginator.num_pages}}页
                            </p>
                    </div>

            </div>
            <div class="col-sm-3">
                <div class="card card-style">
                    <div class="card-header">博客分类</div>
                    <div class="card-body text-dark">
                        <ul class="list-unstyled blog-types">
                        {% for blog_type in blog_types %}
                            <li>
                                <a href="{% url 'blogs_with_type' blog_type.pk %}">
                                    {{ blog_type.type_name}}({{ blog_type.blog_count}})
                                </a>
                            </li>
                        {% empty %}
                            <li>暂无分类</li>
                        {% endfor %}
                        </ul>              
                    </div>
                </div>
                <div class="card card-style">
                    <div class="card-header">日期归档</div>
                    <div class="card-body text-dark">
                        <ul>
                            {% for blog_date,blog_count in blog_dates.items %}
                               <li>
                                   <a href="{% url 'blogs_with_date' blog_date.year blog_date.month%}">  
                                    {{ blog_date|date:"Y年m月"}}({{blog_count}})
                                    </a>
                                </li>
                            {% endfor %}
                        </ul>
                    </div>
                </div>
            </div>
        </div>
       </div> 

{% endblock %}

